import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { NoticeBar } from "antd-mobile";
import { diseaseService, drugService, handleApiResponse, handleApiError } from "../../../utils/api";
import backImg from "../../../assets/icon/common_icon_back_black_n.png";
import indetailImg from "../../../assets/icon/common_nav_message_black_n.png";
import "./index.css";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const { id, type } = useParams();
  const [knowledgeDetail, setKnowledgeDetail] = useState<any>(null);
  const [dragDetail, setDragDetail] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const detailid = Number(id);
  const demoLongText = "本模块知识仅供参考，如有需要，请在医生指导下使用";

  useEffect(() => {
    if (!detailid || !type) return;

    const fetchDetail = async () => {
      setLoading(true);
      setError(null);
      try {
        if (type === "disease") {
          const response = await diseaseService.getDiseaseDetail(detailid);
          const data = handleApiResponse(response);
          setKnowledgeDetail(data);
        } else if (type === "drug") {
          const response = await drugService.getDrugDetail(detailid);
          const data = handleApiResponse(response);
          setDragDetail(data);
        }
      } catch (err) {
        const errorMsg = handleApiError(err);
        setError(errorMsg);
        console.error('获取详情失败:', errorMsg);
      } finally {
        setLoading(false);
      }
    };

    fetchDetail();
  }, [detailid, type]);

  //   console.log(id);
  //   console.log(detailid);
  // console.log(knowledgeDetail);
  // console.log(dragDetail);

  return (
    <div className="AknowledgeDetail">
      <div className="imdetail_top_box">
        <img src={backImg} alt="" onClick={() => navigate(-1)} />
        {/* <span>资讯详情</span> */}
        <img src={indetailImg} alt="" />
      </div>
      <NoticeBar content={demoLongText} color="alert" />
      {loading && (
        <div style={{ textAlign: 'center', padding: '20px' }}>
          加载中...
        </div>
      )}
      {error && (
        <div style={{ textAlign: 'center', padding: '20px', color: 'red' }}>
          {error}
        </div>
      )}
      <div className="Aknowledge_content">
        {!loading && !error && !knowledgeDetail && !dragDetail && (
          <div style={{ textAlign: 'center', padding: '20px' }}>
            暂无数据
          </div>
        )}
        {knowledgeDetail && type == "disease" && (
          <>
            <div className="title">{knowledgeDetail.title || "病症详情"}</div>
            <div className="Aknowledge_bot">
              {knowledgeDetail.pathology && (
                <div>
                  <div className="type">[病理]</div>
                  <div>{knowledgeDetail.pathology}</div>
                </div>
              )}
              {knowledgeDetail.symptom && (
                <div>
                  <div className="type">[症状]</div>
                  <div>{knowledgeDetail.symptom}</div>
                </div>
              )}
              {knowledgeDetail.benefitTaboo && (
                <div>
                  <div className="type">[宜与忌]</div>
                  <div>{knowledgeDetail.benefitTaboo}</div>
                </div>
              )}
              {knowledgeDetail.chineseMedicineTreatment && (
                <div>
                  <div className="type">[中药治疗]</div>
                  <div>{knowledgeDetail.chineseMedicineTreatment}</div>
                </div>
              )}
              {knowledgeDetail.westernMedicineTreatment && (
                <div>
                  <div className="type">[西药治疗]</div>
                  <div>{knowledgeDetail.westernMedicineTreatment}</div>
                </div>
              )}
            </div>
          </>
        )}
        {dragDetail && type == "drug" && (
          <>
            <div className="title">{dragDetail.name || dragDetail.title || "药品详情"}</div>
            <div className="Aknowledge_bot">
              {dragDetail.component && (
                <div>
                  <div className="type">[药品成分]</div>
                  <div>{dragDetail.component}</div>
                </div>
              )}
              {dragDetail.taboo && (
                <div>
                  <div className="type">[用药禁忌]</div>
                  <div>{dragDetail.taboo}</div>
                </div>
              )}
              {dragDetail.effect && (
                <div>
                  <div className="type">[功能主治]</div>
                  <div>{dragDetail.effect}</div>
                </div>
              )}
              {dragDetail.usage && (
                <div>
                  <div className="type">[用法用量]</div>
                  <div>{dragDetail.usage}</div>
                </div>
              )}
              {dragDetail.shape && (
                <div>
                  <div className="type">[药品性状]</div>
                  <div>{dragDetail.shape}</div>
                </div>
              )}
              {dragDetail.packing && (
                <div>
                  <div className="type">[包装规格]</div>
                  <div>{dragDetail.packing}</div>
                </div>
              )}
              {dragDetail.sideEffects && (
                <div>
                  <div className="type">[不良反应]</div>
                  <div>{dragDetail.sideEffects}</div>
                </div>
              )}
              {dragDetail.storage && (
                <div>
                  <div className="type">[贮藏]</div>
                  <div>{dragDetail.storage}</div>
                </div>
              )}
              {dragDetail.minMatter && (
                <div>
                  <div className="type">[注意事项]</div>
                  <div>{dragDetail.minMatter}</div>
                </div>
              )}
              {dragDetail.approvalNumber && (
                <div>
                  <div className="type">[批准文号]</div>
                  <div>{dragDetail.approvalNumber}</div>
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Index;
